<template>
	<view class="container">
		<view class="cu-nav-bar">
			<uni-nav-bar statusBar color="#ffffff" backgroundColor="#07c160" left-icon="left" right-icon="list"
				@clickLeft="goBack" @clickRight="clickRight" title="月度账单" />
		</view>
		<!-- 查询区 -->
		<view class="pay-list-select">
			<button class="select-bt" @click="queryNext(-1)">上一月</button>
			<view>
				<uni-dateformat :date="queryParam.date" format="yyyy年MM月"></uni-dateformat>
			</view>
			<button :class="['select-bt',queryParam.date.slice(0,7) == getNowMonth() ? 'button-disabled':'' ]"
				@click="queryNext(1)">下一月</button>
		</view>
		<!-- 统计区 -->
		<view
			:class="[ gt(pay_total , 99999.999)||gt(pay_total_s , 99999.999)||lt(pay_total_z , -99999.999) ? 'pay-total-column':'pay-total-row']">
			<view class="pay-total-item">
				<view>净收入</view>
				<view :class="[ gteq(pay_total, '0') ? 'money-green':'money-red']">
					{{gteq(pay_total, '0') ? ('￥' + formatMoney(pay_total)) : ('-￥' + formatMoney(pay_total.replace('-','')))}}
				</view>
			</view>
			<view class="pay-total-item">
				<view>总收入</view>
				<view :class="[ gteq(pay_total_s, '0') ? 'money-green':'money-red']">
					{{gteq(pay_total_s, '0') ? ('￥' + formatMoney(pay_total_s)) : ('-￥' + formatMoney(pay_total_s.replace('-','')))}}
				</view>
			</view>
			<view class="pay-total-item">
				<view>总支出</view>
				<view :class="[ gteq(pay_total_z, '0') ? 'money-green':'money-red']">
					{{gteq(pay_total_z, '0') ? ('￥' + formatMoney(pay_total_z)) : ('-￥' + formatMoney(pay_total_z.replace('-','')))}}
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="pay-list-scroll">
			<view class="pay-list-item" v-for="item, index in pay_log_list" :key="index"
				@click="goCashLogDay(item.payTime)">
				<view class="pay-list-item-total">
					<view class="time">
						<uni-dateformat :date="item.payTime" format="yyyy.MM.d"></uni-dateformat>
					</view>
					<view :class="['money', gteq(item.money, '0') ? 'money-green':'money-red']">
						{{gteq(item.money, '0') ? ('￥' + formatMoney(item.money)) : ('-￥' + formatMoney(item.money.replace('-','')))}}
					</view>
				</view>
				<view class="pay-list-item-desc">
					<view class="money_s"> {{ '收入 ￥' + formatMoney(item.money_s) }} </view>
					<view class="money_z"> {{ '支出 -￥' + formatMoney(item.money_z.replace('-','')) }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getMonthOfAdd,
		getNowMonth,
		formatMoney
	} from '@/utils/utils.js'
	import {
		getCashLogListForMonth,
	} from '@/service/service-api.js'
	import {
		gteq,
		gt,
		lt
	} from '@/utils/math-utils'

	const pay_log_list = ref([]) // 交易记录列表
	const pay_total = ref([]) // 交易净额
	const pay_total_z = ref([]) // 支出
	const pay_total_s = ref([]) // 收入
	const queryParam = ref({
		date: getNowMonth()
	}) // 列表查询条件

	onLoad((e) => {
		// 获取参数日期，但不执行获取数据，onShow里获取。下一页返回来时，会触发onShow，不会触发onLoad
		if (e.date) {
			queryParam.value.date = e.date
		}
	})

	onShow(() => {
		getLogList(false)
	})

	// 在组件卸载时
	onUnmounted(() => {});

	const getLogList = (toast = true) => {
		const resultObj = getCashLogListForMonth(queryParam.value.date, 0)
		pay_log_list.value = resultObj.list
		pay_total.value = resultObj.total
		pay_total_z.value = resultObj.total_z
		pay_total_s.value = resultObj.total_s
		if (resultObj.list.length == 0 && toast) {
			uni.showToast({
				icon: 'none',
				title: "无记录"
			})
		}
	}

	const queryNext = (next) => {
		queryParam.value.date = getMonthOfAdd(queryParam.value.date, next)
		getLogList()
	}

	// 前往每日交易明细
	const goCashLogDay = (date) => {
		uni.navigateTo({
			url: '/pages/cash_log_day/cash-log-day?date=' + date
		})
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	const clickRight = () => {
		uni.showToast({
			icon: 'none',
			title: '正在开发中'
		})
	}
</script>

<style lang="scss">
	@import url("cash-log-month.css");
</style>